import React from 'react';
import { useState } from 'react'
import './index.css';

function Case(props) {

  const [see, setSee] = useState(false)
  function check() {
    setSee(true)
  }
  function remove() {
    props.remove(props.caseID)
  }
  return (
    <div className='case-item'>
      <div className='item-name-case'>
        {props.detail}
      </div>
      <div className='check-button' onClick={check}>查看</div>
      <div className='check-button' onClick={remove}>删除</div>
      <div className="mask" style={see ? { display: 'block' } : { display: 'none' }}></div>
      <div className='detail-case' style={see ? { display: 'block' } : { display: 'none' }}>
        <div className='detail-case-topbar'>
          <div style={see ? { display: 'block' ,fontSize: '25px',textAlign:'center', lineHeight:'25px'} : { display: 'none' }} 
          className='detail-case-topbar-name'>{props.detail}</div>
        </div>
        <div className='detail-case-content'>
          <div className='detail-case-content-item'>
            <div className='detail-case-content-name'>接诊</div>
             <div style={see ? { display: 'block' } : { display: 'none' }} 
          className='detail-case-topbar-text'>{props.content[0]}</div>
          </div>
          <div className='detail-case-content-item'>
            <div className='detail-case-content-name'>病例检查</div>
             <div style={see ? { display: 'block' } : { display: 'none' }} 
          className='detail-case-topbar-text'>{props.content[1]}</div>
          </div>
          <div className='detail-case-content-item'>
            <div className='detail-case-content-name'>诊断结果</div>
             <div style={see ? { display: 'block' } : { display: 'none' }} 
          className='detail-case-topbar-text'>{props.content[2]}</div>
          </div>
          <div className='detail-case-content-item'>
            <div className='detail-case-content-name'>治疗方案</div>
             <div style={see ? { display: 'block' } : { display: 'none' }} 
          className='detail-case-topbar-text'>{props.content[3]}</div>
          </div>
        </div>
        <div className='detail-case-footbutton' style={see ? { display: 'block' } : { display: 'none' }} 
        onClick={() => { setSee(false) }}>确定</div>
      </div>
    </div>
  );
}

export default Case;
